import React from "react";

class EventDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "zhangsan",
      list: [
        {
          id: "id-1",
          title: "标题1",
        },
        {
          id: "id-2",
          title: "标题2",
        },
        {
          id: "id-3",
          title: "标题3",
        },
      ],
    };

    // 修改方法的 this 指向
    this.clickHandler1 = this.clickHandler1.bind(this);
  }
  render() {
    return (
      <>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <li
                key={item.id}
                onClick={this.clickHandler4.bind(this, item.id, item.title)}
              >
                index {index}; title {item.title}
              </li>
            );
          })}
        </ul>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <li
                key={item.id}
                onClick={(e) => this.clickHandler5(item.id, item.title, e)}
              >
                index {index}; title {item.title}
              </li>
            );
          })}
        </ul>
      </>
    );
  }
  clickHandler1() {
    // console.log('this....', this) // this 默认是 undefined
    this.setState({
      name: "lisi",
    });
  }
  // 静态方法，this 指向当前实例
  clickHandler2 = () => {
    this.setState({
      name: "lisi",
    });
  };
  // 获取 event
  clickHandler3 = (event) => {
    event.preventDefault(); // 阻止默认行为
    event.stopPropagation(); // 阻止冒泡
    console.log("target", event.target); // 指向当前元素，即当前元素触发
    console.log("current target", event.currentTarget); // 指向当前元素，假象！！！

    // 注意，event 其实是 React 封装的。可以看 __proto__.constructor 是 SyntheticEvent 组合事件
    console.log("event", event); // 不是原生的 Event ，原生的 MouseEvent
    console.log("event.__proto__.constructor", event.__proto__.constructor);

    // 原生 event 如下。其 __proto__.constructor 是 MouseEvent
    console.log("nativeEvent", event.nativeEvent);
    console.log("nativeEvent target", event.nativeEvent.target); // 指向当前元素，即当前元素触发
    console.log("nativeEvent current target", event.nativeEvent.currentTarget); // 指向 document ！！！

    // 1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力
    // 2. event.nativeEvent 是原生事件对象
    // 3. 所有的事件，都被挂载到 document 上
    // 4. 和 DOM 事件不一样，和 Vue 事件也不一样
  };
  // 传递参数
  clickHandler4(id, title, event) {
    console.log(id, title);
    console.log("event", event); // 最后追加一个参数，即可接收 event
  }
  clickHandler5 = (id, title, event) => {
    console.log(id, title);
    console.log("event =>", event); // 最后追加一个参数，即可接收 event
  }
}

export default EventDemo;
